.showBoxLink::before{ content:'';
    position:absolute; top:0px;
    left:50%; transform:translateX(-50%);
    width:60%; height:1px;
    background:#fff;
    transition:all .5s ease; }

.showBoxLink::after{ content:'';
    position:absolute; bottom:0px;
    left:50%; transform:translateX(-50%);
    width:60%; height:1px; background:#fff;
    transition:all .5s ease; }

.lookDetail:hover .barr{ opacity:0; }
.lookDetail:hover .harr{ opacity:1; }
.proLi:hover .showBox{ opacity:1; }
.proLi:hover .proImg{ transform:translate(110% ,110%) scale(1.1); }
.proLi {


}
.proLi:hover .showBoxLink::before{ width:1rem; }

.proLi:hover .showBoxLink::after{ width:1rem; }
.porBbox {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 90px;
    padding: 20px 20px 10px;
    border: 1px solid #f2f2f2;
}
.proTitle {
    font-size: 16px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    white-space: nowrap;
    width: 100%;
}
.showBox {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0,0,0,.6);
    transition: all 0.5s ease;
}

.showBoxLink {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: block;
    width: 60%;
    color: #fff;
    text-align: center;
    font-size: 16px;
    padding: 0.5rem 0;
}
.arrowsR {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translate(0, -50%);
    width: 30px;
}
.lookDetail {
    position: relative;
    display: block;
    color: #777;
    height: 38px;
    line-height: 38px;
    border-top: 1px solid #e5e5e5;
}

.arrowsR img {
    position: absolute;
    transition: all .5s ease;
}
.harr {
    opacity: 0;
}
.arrowsR img {
    position: absolute;
    transition: all .5s ease;
}


@media only screen and (min-width: 769px){
    .proTitle {
        font-size: 1rem;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        white-space: nowrap;
        width: 100%;
    }

    .showBox {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0;
        background: rgba(0,0,0,.6);
        transition: all 0.5s ease;
    }
    .arrowsR img {
        position: absolute;
        transition: all .5s ease;
    }
    .showBoxLink {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: block;
        width: 60%;
        color: #fff;
        text-align: center;
        font-size: 1rem;
        padding: 0.5rem 0;
    }

    .lookDetail {
        position: relative;
        display: block;
        color: #777;
        height: 38px;
        line-height: 38px;
        border-top: 1px solid #e5e5e5;
    }


    .arrowsR {
        position: absolute;
        top: 50%;
        right: 0px;
        transform: translate(0, -50%);
        width: 30px;}
}
@media only screen and (max-width: 768px){
.casebg{width:100%;padding: 10px;}
.casebg2{margin:0px;padding:0px}
.box-3 span{position: absolute;color: white;background: rgba(125,125,120,.3);width: 50px;height: 80px;
    top:50%; font-family: "宋体";line-height: 80px;font-size:60px;margin-top: -40px;
    text-align: center;cursor: pointer;}
.box-1 ul li img {
    display: block;
    width: 100%;
    height: 300px;
}
.box {
    width: 100%;
    height: 300px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
}
.box-1 ul li{width:100%;height: 300px;position: relative;overflow: hidden;}
 }
@media only screen and (min-width: 769px){

    .p_products {
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: hidden;
        white-space: normal;
		
    }
	
	.box{width: 100%;height: 400px;margin: 20px auto;overflow: hidden;position: relative;}
.box-1 ul{}
.box-1 ul li{width:100%;height: 400px;position: relative;overflow: hidden;}

	
.box-1 ul li img{display:block;width: 100%; height: 400px;}
.box-3 span{position: absolute;color: white;background: rgba(125,125,120,.3);width: 50px;height: 80px;
    top:50%; font-family: "宋体";line-height: 80px;font-size:60px;margin-top: -40px;
    text-align: center;cursor: pointer;}

    .porTbox{ position:relative; overflow:hidden; width:100%;  }

    .proImg{ top:50%; left:50%; width:100%; transition:all .5s ease; }

    .porBbox{ position:relative; overflow:hidden; width:100%; height:90px; padding:20px 20px 10px; border:1px solid #f2f2f2; }

    .proTitle{ font-size:1rem; color:#333; overflow:hidden; text-overflow:ellipsis; position:relative; white-space:nowrap; width:100%; }

    .proSummry{ color:#777; white-space:nowrap; overflow:hidden; margin:10px 0; text-overflow:ellipsis; }

    .lookDetail{ position:relative; display:block; color:#777; height:38px; line-height:38px; border-top:1px solid #e5e5e5; }

    .arrowsR{ position:absolute; top:50%; right:0px; transform:translate(0, -50%); width:30px; }

    .arrowsR img{ position:absolute; transition:all .5s ease; }
    .harr{ opacity:0; }

    .showBox{ position:absolute; top:0px; left:0px; width:100%; height:100%; opacity:0; background:rgba(0,0,0,.6); transition:all 0.5s ease; }

    .showBoxLink{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:block; width:60%; color:#fff; text-align:center;
        font-size:1rem; padding:0.5rem 0; }
		.casebg{background-color: rgba(242,244,246,1);width:100%;padding: 30px;}
.casebg2{background-color: rgba(255,255,255,1);margin:30px;padding:20px}
}











.casebt h1{font-size:22px;font-weight:bold;padding:20px;border-bottom:1px solid #efefef}
.casebt p{font-size:14px;padding:20px;line-height:24px}
.font {
    display: inline-block;
    margin-bottom: 10px;
    background: #197fbd;
    padding: .6vw 3vw;
    border-radius: 0px;
    font-size: 16px;
    color: #fff;
    border: 1px solid #197fbd;
    transition: all .36s ease;
    line-height: 1.42857143;
    font-weight: normal;
}
.font a{color: #fff;}
.font a:hover{color: #fff;}
.font2 {
    display: inline-block;
    background: #197fbd;
    border-radius: 0px;
    font-size: 22px;
    color: #fff;
    border: 1px solid #197fbd;
    transition: all .36s ease;
    font-weight: normal;
    height: 70px;
    width: calc((100% - 4px)/3);
    text-align: center;
    line-height: 70px;
}
.pre{font-size:14px;color:#000;display: inline-block;float:left}
.pre1{font-size:14px;color:#ddd;display: inline-block;float:left}
.next{font-size:14px;color:#000;text-align:right;display: inline-block;float:left}
.next1{font-size:14px;color:#ddd;text-align:right;display: inline-block;float:left}


.box-1 ul li h2{position: absolute;left: 0;bottom: 0;height: 40px;width:300px;background: rgba(125,125,120,.4);text-indent: 2em;
    padding-right:500px ;font-size: 15px;line-height: 40px;text-overflow: ellipsis;overflow: hidden;
    white-space: nowrap;font-weight: normal;color: ghostwhite}
.box-2{position: absolute;right: 10px;bottom: 14px;}
.box-2 ul li{float:left;width: 12px;height: 12px;overflow: hidden; margin: 0 5px; border-radius: 50%;
    background: rgba(0,0,0,0.5);text-indent: 100px;cursor: pointer;}
.box-2 ul .on{background: rgba(255,255,255,0.6);}

.box-3 .prev{left: 10px;}
.box-3 .next{right: 10px;}
.box-3 span::selection{background: transparent;}
.box-3 span:hover{background: rgba(125,125,120,.8);}